<template>
  <div id="blog-detail" :style="'background: url(' + bgImg + ')  no-repeat center'" ref="scroll" @scroll="getScroll">
    <header-inner class="header-inner"/>
    <side-bar-inner class="side-bar-inner"/>
    <detail-body class="detail-body" refs="scroll" @scroll="getScroll"/>
    <span class="back-top" @click="backTop">
      <img :src="backTopIcon" alt=""/>
    </span>
  </div>
</template>

<script>
import DetailBody from "@/components/blog/blogDetail/DetailBody";
import NavBar from "@/components/blog/blogs/NavBar";
import HeaderInner from "@/components/blog/blogs/HeaderInner";
import SideBarInner from "@/components/blog/blogs/SideBarInner";

import bgImg from "@/assets/background/明日方舟-情人节.jpg";
import backTopIcon from "@/assets/icon/backtop.png";

export default {
  name: "BlogDetail",
  components: {
    DetailBody,
    NavBar,
    HeaderInner,
    SideBarInner
  },
  data() {
    return {
      bgImg,
      backTopIcon
    }
  },
  methods: {
    getScroll(e) {
      const backTop = document.getElementsByClassName("back-top");
      if(this.$refs.scroll.scrollTop < 2000) {
        backTop[0].style.display = "none";
      }else {
        backTop[0].style.display = "block";
      }
    },
    backTop() {
      this.$refs.scroll.scrollTop = 0;
      // while (this.$refs.scroll.scrollTop !== 0) {
      //   this.$refs.scroll.scrollTop = this.$refs.scroll.scrollTop - 1;
      // }
    }
  }
}
</script>

<style scoped>
  #blog-detail {
    overflow: auto;
    /*background-color: #eeeeee;*/
    height: 100%;
    /*padding-bottom: 90px;*/
  }

  .detail-body {
    /*position: absolute;*/
    width: 50%;
    margin-top: 10px;
    margin-left: 30%;
    margin-bottom: 90px;
  }

  #blog-detail .header-inner {
    z-index: 1;
    position: absolute;
    top: 10px;
    left: 17%;
    width: 12%;
  }

  #blog-detail .side-bar-inner {
    position: absolute;
    top: 220px;
    right: 71%;
    width: 12%;
  }

  #blog-detail .back-top {
    display: none;
    position: absolute;
    top: 90%;
    left: 90%;
    width: 30px;
    height: 30px;
  }

  #blog-detail .back-top {
    cursor: pointer;
  }

  #blog-detail .back-top img{
    width: 100%;
  }
</style>